<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>数据统计 -- 物料投放</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">物料投放实时数据：</h4>
        <div class="spinner col-sm-6 col-xs-3" style="text-align: right;" title="正在实时获取数据标志">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>

    <form class="form-inline">
<shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
        <div class="form-group">
            <input id="quXianNameInput" class="form-control input-sm" type="text" placeholder="区县名称">
        </div>
</shiro:hasPermission>
<shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
<shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">

        <div class="form-group">
            <input id="channelNameId" class="form-control input-sm" type="text" placeholder="渠道名称">
        </div>
</shiro:lacksPermission>
</shiro:lacksPermission>
        <div class="form-group">
            <input id="shopNameId" class="form-control input-sm" type="text" placeholder="店铺名称">
        </div>
        <div class="form-group">
            <input id="orderLevelInput" class="form-control input-sm" type="text" placeholder="档位名称">
        </div>
        <div class="form-group">
            <select class="form-control input-sm" id="isExp">
                <option value="-1">--是否试点--</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <div class="form-group">
            <input id="beginTimeInput" class="form-control input-sm" type="text" placeholder="选择开始时间">
        </div>
        <div class="form-group">
            <input id="endTimeInput" class="form-control input-sm" type="text" placeholder="选择结束时间">
        </div>
        <shiro:hasPermission name="SCRATCHOFF:STATISTICSADMIN">
            <div class="form-group">
                <input id="sourceInput" class="form-control input-sm" type="text" placeholder="物料来源">
            </div>
        </shiro:hasPermission>
        <button type="button" class="btn btn-success btn-sm" title="默认查询近一个月的数据" onclick="selectScratchoff();">查询
        </button>
        <button type="button" class="btn  btn-info btn-sm" onclick="exportExcel();">导出Excel</button>
        <button type="button" class="btn btn-warning btn-sm" onclick="autogetData();" title="实时拉取最新的订单数据">实时获取</button>
    </form>

    <div class="table-responsive" id="tableContainer" style="margin-top: 10px;overflow-y: auto">
        <table class="table table-striped table-condensed" id="app">
            <thead style="background-color: rgb(53, 147, 202)">
            <tr style="color: rgb(248, 248, 248);">
                <th>序号</th>
                <th>中奖奖品</th>
                <th>中奖时间</th>
                <th>中奖电话</th>
                <th>中奖店铺</th>
                <th>客户名称</th>
                <th>渠道名称</th>
                <th>剩余奖品</th>
                <th>购买商品</th>
                <th>物料来源</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(order,index) in orderList">
                <td>{{index+1}}</td>
                <td>{{order.prize}}</td>
                <td>{{order.timeStr}}</td>
                <td>{{order.phone}}</td>
                <td>{{order.shopName}}</td>
                <td>{{order.custName}}</td>
                <td>{{order.channelName}}</td>
                <td>{{order.residue}}</td>
                <td>{{order.productName}}</td>
                <td>{{order.source}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-6 col-lg-3 main" id="main1" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-6 col-lg-3 main" id="main3" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-6 col-lg-3 main" id="main2" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-6 col-lg-3 main" id="main4" style="margin-top: 10px;"></div>
    </div>
</div>
<!-- <button class="btn btn-success" type="button" onclick="changeData();">加数据</button> -->
<form action="${contextPath}/page/exportExcel" method="post" id="exportExcel" style="display:none">
    <textarea type="hidden" id="exportExcelData" name="exportExcelData"></textarea>
    <input type="hidden" name="tableType" value="scratch">
</form>

</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            orderList: []
        }
    })


    $(".main").height($(window).height() * 0.55)
    //$("#main1").width($(window).width()*0.3333);
    var myChart1 = echarts.init($("#main1")[0])
    var myChart2 = echarts.init($("#main2")[0])
    var myChart3 = echarts.init($("#main3")[0])
    var myChart4 = echarts.init($("#main4")[0])

    var option = {
        title: {
            text: '物料统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series: [
            {
                name: '中奖数据',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option)
    myChart2.setOption(option)
    myChart3.setOption(option)
    myChart4.setOption(option)

    var changeData = function (orderArray) {
        app.orderList.unshift(orderArray)
    }

    var countNum = 1;
    var intervalGetOrder = function () {

        var order = app.orderList[0]
        var lastCreateTime = ""
        if (order) {
            lastCreateTime = order.timeStr;
        }
        //var lastCreateTime = "2017-01-11 18:18:18"
        //console.log(lastCreateTime)
        //console.log('第' + (countNum++) + '次获取数据')
        $.ajax({
            url: '${contextPath}/page/getScratchoff?lastOrderTime=' + lastCreateTime, //localhost:8080

            success: function (data) {
                if (data.success) {
                    var dataArray = data.data.ShipmentOrderList

                    if (dataArray.length > 0) {
                        var appOrderList = dataArray.concat(app.orderList)


                        if (appOrderList.length > 50) {
                            appOrderList = appOrderList.slice(0, 51)
                        }

                        app.orderList = appOrderList
                    }

                    //console.log(data.data.SPLOrderDayData)
                    var SPLOrderDayDataObj = data.data.ShipmentOrderDayData;
                    var SPLOrderMonthDataObj = data.data.ShipmentOrderMonthData;
                    var SPLOrderYearDataObj = data.data.ShipmentOrderYearData;
                    var residueScratchoff = data.data.residueScratchoff;
                    if (SPLOrderDayDataObj != null) {

                        updateOrderDayData(SPLOrderDayDataObj)
                        updateOrderMonthData(SPLOrderMonthDataObj)
                        updateOrderYearData(SPLOrderYearDataObj)
                        updateResidueScratchoff(residueScratchoff)
                    }

                } else if (data.success == undefined) {
                    window.location.href = "${contextPath}"
                }
                //console.log(data.data)
                //console.log('数据长度为：' + dataArray.length)
            },
            error: function (error) {
                //console.log(error)
            }
        })
    }
    var intervalId;
    intervalId = setInterval(intervalGetOrder, "10000");

    $("#tableContainer").css("border", "1px solid gray");
    //改变div的高度
    $("#tableContainer").height($(window).height() * 0.35);

    function updateOrderDayData(data) {
        myChart1.setOption({
            title: {
                text: '当天中奖统计'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data.names
            },
            series: [
                {
                    name: '中奖数据',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data.data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

    }

    function updateOrderMonthData(data) {
        myChart2.setOption({
            title: {
                text: '当月中奖统计'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data.names
            },
            series: [
                {
                    name: '中奖数据',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data.data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

    }

    function updateOrderYearData(data) {
        myChart3.setOption({
            title: {
                text: '当周中奖统计'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data.names
            },
            series: [
                {
                    name: '中奖数据',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data.data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

    }

    function updateResidueScratchoff(data) {
        myChart4.setOption({
            title: {
                text: '剩余物料统计'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data.names
            },
            series: [
                {
                    name: '剩余物料',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data.data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

    }
    intervalGetOrder()
    //var nowDate = new Date();
    //nowDate.setMonth(nowDate.getMonth() - 1);
    $('#beginTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        //startDate: nowDate,
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#endTimeInput').datetimepicker('setStartDate', startTime);
    });
    $('#endTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#beginTimeInput').datetimepicker('setEndDate', endTime);
    });

    var selectScratchoff = function () {
        var quXianName = $("#quXianNameInput").val();
        var channelName = $("#channelNameId").val();
        var shopName = $("#shopNameId").val();
        var beginTime = $("#beginTimeInput").val();
        var endTime = $("#endTimeInput").val();
        var source = "";
        <shiro:hasPermission name="SCRATCHOFF:STATISTICSADMIN">
        source = $("#sourceInput").val();
        </shiro:hasPermission>
        var isExp = $("#isExp").val();
        var orderLevel = $("#orderLevelInput").val();

        if (quXianName == "" && beginTime == "" && endTime == "" && shopName == "" && channelName == "" && source == "" && orderLevel=="") {
            layer.msg("请至少选择除试点店以外的一个查询条件")
            return
        }
        layer.load(1)
        $.ajax({
            url: '${contextPath}/page/getScratchoffByTime',
            type: 'post',
            dataType: 'json',
            data: {
                stringMap: {
                    quXianName: quXianName,
                    beginTime: beginTime,
                    endTime: endTime,
                    shopName: shopName,
                    channelName: channelName,
                    source: source,
                    isExp:isExp,
                    orderLevel : orderLevel,
                },
            },
            success: function (data) {
                if (data.success) {
                    var array = data.data;
                    if (array.length > 0) {
                        clearInterval(intervalId)
                        app.orderList = array
                        $(".spinner").addClass("hide")
                    } else {
                        layer.msg("所选条件没有数据")
                    }
                } else {
                    layer.msg(data.message);
                }
                layer.closeAll('loading')
            },
            error: function (error) {
                layer.msg("网络连接失败")
                layer.closeAll('loading')
            }
        })
    }

    var autogetData = function () {
        if ($(".spinner").hasClass("hide") == false) {
            layer.msg("已经在实时获取数据")
            return
        }
        intervalId = setInterval(intervalGetOrder, "10000");
        $(".spinner").removeClass("hide")
    }

    var exportExcel = function () {
        if (app.orderList.length <= 0) {
            layer.msg("当前表格没有数据");
            return
        }
        $("#exportExcelData").val(JSON.stringify(app.orderList))
        $("#exportExcel").submit();

    }

    var getShopNameToSelect = function (channelName) {
        $.ajax({
            url: '${contextPath}/page/getShopNameToSelect?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#shopNameId').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        minChars: 0,
                    });
                }
            }
        })
    }
    getShopNameToSelect('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#channelNameId').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            getShopNameToSelect(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')
    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    })

    var selectOrderLevelToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectOrderLevelToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#orderLevelInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectOrderLevelToSelected();
</script>
</html>





